<script setup lang="ts">
import { useVbenModal } from '@vben/common-ui';

import { useVbenForm } from '#/adapter/form';
import { GroupApi } from '#/api/system/group';

const emit = defineEmits<{ create: [Partial<GroupApi.GroupResult>] }>();
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户端名称',
      },
      fieldName: 'client',
      label: '客户端',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入令牌前缀',
      },
      fieldName: 'prefix',
      label: '令牌前缀',
      rules: 'required',
    },
    {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择过期时间',
        showTime: true,
      },
      fieldName: 'expired_at',
      label: '过期时间',
    },
  ],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-1',
  handleSubmit: async (values: Record<string, any>) => {
    emit('create', values);
  },
});

const [Modal] = useVbenModal({
  async onConfirm() {
    await formApi.validateAndSubmitForm();
    // await formApi.submitForm();
  },
});
</script>

<template>
  <Modal title="新增令牌"> <Form /> </Modal>
</template>
